<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        #layout_con{
            height: 100%;
            width: 100%;
        }
        .menu-item span{
            display: inline-block;
            overflow: hidden;
            width: 69px;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: bottom;
            transition: width .2s ease .2s;
        }
        .menu-item i{
            transform: translateX(0px);
            transition: font-size .2s ease, transform .2s ease;
            vertical-align: middle;
            font-size: 16px;
        }
        .collapsed-menu span{
            width: 0px;
            transition: width .2s ease;
        }
        .collapsed-menu i{
            transform: translateX(5px);
            transition: font-size .2s ease .2s, transform .2s ease .2s;
            vertical-align: middle;
            font-size: 22px;
        }
    </style>
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"></link>
</head>
<body>
    <div id="layout_con">
        <Layout :style="{minHeight: '100vh'}">
            <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
                <i-menu active-name="1-2" theme="dark" width="auto" :class="menuitemClasses">
                    <Menu-Item name="1-1">
                        <Icon type="ios-navigate"></Icon>
                        <span>Option 1</span>
                    </Menu-Item>
                    <Menu-Item name="1-2">
                        <Icon type="search"></Icon>
                        <span>Option 2</span>
                    </Menu-Item>
                    <Menu-Item name="1-3">
                        <Icon type="settings"></Icon>
                        <span>Option 3</span>
                    </Menu-Item>
                </i-menu>
            </Sider>
            <Layout>
                <i-header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></i-header>
                <i-content :style="{padding: '0 16px 16px'}">
                    <Breadcrumb :style="{margin: '16px 0'}">
                        <Breadcrumb-Item>Home</Breadcrumb-Item>
                        <Breadcrumb-Item>Components</Breadcrumb-Item>
                        <Breadcrumb-Item>Layout</Breadcrumb-Item>
                    </Breadcrumb>
                    <Card>
                        <div style="height: 600px">Content</div>
                    </Card>
                </i-content>
            </Layout>
        </Layout>
    </div>
    <script src="//vuejs.org/js/vue.min.js" type="text/javascript"></script>
    <script src="//unpkg.com/iview/dist/iview.min.js" type="text/javascript"></script>
    <script>
        new Vue({
            el: '#layout_con',
            data: {
                isCollapsed: false
            },
            computed: {
                menuitemClasses: function () {
                    return [
                        'menu-item',
                        this.isCollapsed ? 'collapsed-menu' : ''
                    ]
                }
            }
        })
    </script>
</body>
</html>